<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{ title }}</text>
		</view>
	</view>
	<button style="width: 300rpx;" @click="envLog">打印环境变量</button>

	<view style="display: flex; flex-direction: column; justify-content: center; align-items: center;">
		<van-button style="margin: 60rpx 0 20rpx 0;" type="primary" @click="VT.showPopup()">Vant-popup组件</van-button>
		<VanButton type="success" @click="VT.showCalendar()">Vant-日期范围</VanButton>
	</view>
	<van-popup v-model:show="VT.popup" position="left"
		:style="{width: '50%', height:'100vh', padding: '10px' }">popup组件</van-popup>
	<van-calendar v-model:show="VT.calendar" type="range" @confirm="VT.hideCalendar" />
	<view>选择日期 :{{VT.calendarDate}}</view>
</template>

<script setup>
	import { onMounted, ref } from 'vue';
	const title = ref('vue3+vite+scss+vant')

	// 使用Hooks的方式调用Vant组件库的函数和变量
	import vantHooks from './vant-hooks'
	const VT = ref(vantHooks());
	
	// 打印环境变量
	function envLog() {
		uni.showToast({ title: '请查看控制台', icon: 'none' });
		console.log('当前环境信息:', import.meta.env);
		console.log('Vant组件库:', VT.value);
		
	}
</script>

<style lang="scss">
	page {
		background: #eee;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.logo {
			height: 200rpx;
			width: 200rpx;
			margin-top: 200rpx;
			margin-left: auto;
			margin-right: auto;
			margin-bottom: 50rpx;
		}

		.text-area {
			display: flex;
			justify-content: center;
		}

		.title {
			font-size: 36rpx;
			color: #8f8f94;
		}
	}
</style>